<template>
    <div>
        <Tabs type="card" :value="tabIndex" @on-click="tabClick">
            <TabPane label="服务协议" name="1"></TabPane>
            <TabPane label="隐私政策" name="2"></TabPane>
            <TabPane label="关于我们" name="3"></TabPane>
            <TabPane label="推广规则" name="4"></TabPane>
            <TabPane label="用户协议" name="5"></TabPane>
            <TabPane label="服务与隐私条款" name="6"></TabPane>
        </Tabs>
        <Form ref="formValidate" :model="configInfo" :label-width="60">
            <FormItem label="服务协议" v-if="tabIndex == 1">
                <div style="border: 1px solid #ccc;">
                    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig"
                        :mode="mode" />
                    <Editor style="height: 500px; overflow-y: hidden;" v-model="configInfo.service_protocol"
                        :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
                </div>
            </FormItem>
            <FormItem label="隐私政策" v-if="tabIndex == 2">
                <div style="border: 1px solid #ccc;">
                    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor1" :defaultConfig="toolbarConfig1"
                        :mode="mode" />
                    <Editor style="height: 500px; overflow-y: hidden;" v-model="configInfo.privacy_policy"
                        :defaultConfig="editorConfig1" :mode="mode" @onCreated="onCreatedaa" />
                </div>
            </FormItem>

            <FormItem label="关于我们" v-if="tabIndex == 3">
                <div style="border: 1px solid #ccc;">
                    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor2" :defaultConfig="toolbarConfig2"
                        :mode="mode" />
                    <Editor style="height: 500px; overflow-y: hidden;" v-model="configInfo.about_us"
                        :defaultConfig="editorConfig2" :mode="mode" @onCreated="onCreatedaa" />
                </div>
            </FormItem>
            <FormItem label="推广规则" v-if="tabIndex == 4">
                <div style="border: 1px solid #ccc;">
                    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor3" :defaultConfig="toolbarConfig3"
                        :mode="mode" />
                    <Editor style="height: 500px; overflow-y: hidden;" v-model="configInfo.promotion_rules"
                        :defaultConfig="editorConfig3" :mode="mode" @onCreated="onCreatedaa" />
                </div>
            </FormItem>
            <FormItem label="用户协议" v-if="tabIndex == 5">
                <div style="border: 1px solid #ccc;">
                    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor4" :defaultConfig="toolbarConfig4"
                        :mode="mode" />
                    <Editor style="height: 500px; overflow-y: hidden;" v-model="configInfo.user_agreement"
                        :defaultConfig="editorConfig4" :mode="mode" @onCreated="onCreatedaa" />
                </div>
            </FormItem>
            <FormItem label="服务与隐私条款" v-if="tabIndex == 6">
                <div style="border: 1px solid #ccc;">
                    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor4" :defaultConfig="toolbarConfig5"
                        :mode="mode" />
                    <Editor style="height: 500px; overflow-y: hidden;" v-model="configInfo.service_privacy_terms"
                        :defaultConfig="editorConfig5" :mode="mode" @onCreated="onCreatedaa" />
                </div>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit()">提交</Button>
            </FormItem>
        </Form>
    </div>
</template>

<script>
import config from "@/config";
import { getToken } from "../../libs/util";

const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseImgUrl.dev : config.baseImgUrl.pro;
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
    components: {
        Editor, Toolbar
    },
    data() {
        return {
            baseImgeUrl: baseImgeUrl,
            action_url: baseUrl + "/admin/image/uploadImg",
            header: { token: getToken() },
            imgUrl: '',
            editor: null,
            html: '<p>hello</p>',
            toolbarConfig: {
            },
            editor1: null,
            editor2: null,
            html1: '<p>hello</p>',
            toolbarConfig1: {
            },
            toolbarConfig2: {
            },
            toolbarConfig3: {
            },
            toolbarConfig4: {
            },
            toolbarConfig5: {
            },
            editorConfig: {
                placeholder: '请输入内容...',
                MENU_CONF: {
                    uploadImage: {
                        server: baseUrl + "/admin/image/uploadImage",
                        fieldName: "image",
                        headers: {
                            token: getToken()
                        },
                        // 单个文件上传成功之后
                        onSuccess(file, res) {
                        },
                    },
                    uploadVideo: {  //上传视频配置
                        server: baseUrl + "/admin/image/uploadImage",
                        fieldName: "image",
                        headers: {
                            token: getToken()
                        }
                    },

                }
            },
            editorConfig1: {
                placeholder: '请输入内容...',
                MENU_CONF: {
                    uploadImage: {
                        server: baseUrl + "/admin/image/uploadImage",
                        fieldName: "image",
                        headers: {
                            token: getToken()
                        },
                        // 单个文件上传成功之后
                        onSuccess(file, res) {
                        },
                    },
                    uploadVideo: {  //上传视频配置
                        server: baseUrl + "/admin/image/uploadImage",
                        fieldName: "image",
                        headers: {
                            token: getToken()
                        }
                    },

                }
            },
            editorConfig2: {
                placeholder: '请输入内容...',
                MENU_CONF: {
                    uploadImage: {
                        server: baseUrl + "/admin/image/uploadImage",
                        fieldName: "image",
                        headers: {
                            token: getToken()
                        },
                        // 单个文件上传成功之后
                        onSuccess(file, res) {
                        },
                    },
                    uploadVideo: {  //上传视频配置
                        server: baseUrl + "/admin/image/uploadImage",
                        fieldName: "image",
                        headers: {
                            token: getToken()
                        }
                    },

                }
            },
            editorConfig3: {
                placeholder: '请输入内容...',
                MENU_CONF: {
                    uploadImage: {
                        server: baseUrl + "/admin/image/uploadImage",
                        fieldName: "image",
                        headers: {
                            token: getToken()
                        },
                        // 单个文件上传成功之后
                        onSuccess(file, res) {
                        },
                    },
                    uploadVideo: {  //上传视频配置
                        server: baseUrl + "/admin/image/uploadImage",
                        fieldName: "image",
                        headers: {
                            token: getToken()
                        }
                    },

                }
            },
            editorConfig4: {
                placeholder: '请输入内容...',
                MENU_CONF: {
                    uploadImage: {
                        server: baseUrl + "/admin/image/uploadImage",
                        fieldName: "image",
                        headers: {
                            token: getToken()
                        },
                        // 单个文件上传成功之后
                        onSuccess(file, res) {
                        },
                    },
                    uploadVideo: {  //上传视频配置
                        server: baseUrl + "/admin/image/uploadImage",
                        fieldName: "image",
                        headers: {
                            token: getToken()
                        }
                    },

                }
            },
            editorConfig5: {
                placeholder: '请输入内容...',
                MENU_CONF: {
                    uploadImage: {
                        server: baseUrl + "/admin/image/uploadImage",
                        fieldName: "image",
                        headers: {
                            token: getToken()
                        },
                        // 单个文件上传成功之后
                        onSuccess(file, res) {
                        },
                    },
                    uploadVideo: {  //上传视频配置
                        server: baseUrl + "/admin/image/uploadImage",
                        fieldName: "image",
                        headers: {
                            token: getToken()
                        }
                    },

                }
            },
            mode: 'default', // or 'simple',
            tabIndex: "1",
            configInfo: {
                service_protocol: "",
                privacy_policy: "",
                about_us:"",
                promotion_rules:"",
                user_agreement:"",
                service_privacy_terms:""
            },
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        onCreatedaa(editor) {
            this.editor1 = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        tabClick(name) {
            this.tabIndex = name;
        },
        // 查询管理员信息
        getConfigInfo() {
            this.$axios('/admin/config/getConfigInfo', { type: 3 }).then(res => {
                this.configInfo = res;
            });
        },
        handleSuccess(res, file) {
            this.formItem.img = res.data.src;
            this.imgUrl = res.data.src;
        },
        handleFormatError(file) {
            this.$Notice.warning({
                title: "文件格式错误",
                desc: "不支持该文件类型",
            });
        },
        handleSubmit() {
            console.log(this.configInfo);
            this.$axios('/admin/config/setConfig', this.configInfo).then(res => {
                this.$Message.success('保存成功');
                this.getConfigInfo();
            });
        },
    },
    created() {
        this.getConfigInfo();
    }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
